<template>
    <div class="incoming">
        <header class="m-header">请求快处...</header>
        <div class="m-content">
            <img class="incoming-img" src="../../assets/mini_accident/incoming.png" alt="">
        </div>
        <ul class="incoming-btn">
            <li>
                <img class="" src="../../assets/mini_accident/ring_off.png" alt="" @click="hangUp">
            </li>
            <li>
                <img src="../../assets/mini_accident/answer.png" alt="" @click="answerTap">
            </li>
        </ul>
    </div>
</template>

<script>
    import WebSocketUtil from "@/util/WebSocketUtil";

    export default {
        name: "IncomingState",
        data() {
            return {};
        },
        computed: {},
        mounted() {},
        methods: {
            hangUp() { // 拒接
                let _incomingMessage = this.$store.state.MiniAccident.incomingMessage;
                WebSocketUtil.closeAudio();
                WebSocketUtil.sendWebSocket({
                    cmd: 3,
                    msg: _incomingMessage.callerId,
                    groupId: _incomingMessage.roomId
                });
                this.$store.commit("setComingState", false);
            },
            answerTap() { // 接听
                WebSocketUtil.closeAudio();
                this.$store.dispatch("answerAction");
            }
        }
    };
</script>

<style scoped lang="scss">
    .incoming-img{
        width: 400px;
        height: 380px;
    }
    .m-header{
        text-align: center;
        line-height: 60px;
        font-size: 16px;
        font-weight: 400;
        color: rgba(255,255,255,1);
        background-color: #090909;
    }
    .m-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 0px 40px 0px
    }
    .incoming-btn{
        height: 93px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        background-color: #090909;
        li{
            cursor: pointer;
            img{
                width: 62px;
                height: 62px;
            }
        }
    }
</style>
